<script setup lang='ts'>

import { ref, watchEffect } from 'vue';

/**
 * 实现以下自定义指令
 * 在表单输入元素和数据间创建双向绑定
 *
*/
const VOhModel = {
  mounted(el, binding) {
    watchEffect(() => {
      // 将 input 元素的值设置为 binding.value 的值
      el.value = binding.value
      // 监听 input 元素的 input 事件，在事件处理函数中更新 value 的值
      el.addEventListener('input', (e) => {
        value.value = e.target.value
      })
    })
  },
}

const value = ref("Hello Vue.js")

</script>

<template>
  <input v-oh-model="value" type="text" />
</template>
